<template>
  <view class="page">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="nav-bar">
        <image 
          class="back-icon" 
          src="/static/recharge/d2d56def1b7e4daac7adad19dc740323.png" 
          @tap="handleBack"
        />
        <text class="title">资料设置</text>
      </view>
    </view>

    <!-- 表单列表 -->
    <view class="form-list">
      <view class="form-item" @tap="chooseAvatar">
        <text class="label">头像</text>
        <view class="value">
          <image class="avatar" :src="userInfo.avatarUrl || '/static/my/default-avatar.png'" mode="aspectFill" />
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>
      </view>
      
      <view class="form-item" @tap="changeName">
        <text class="label">昵称</text>
        <view class="value">
          <text>{{userInfo.nickName || '未设置'}}</text>
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>
      </view>
      
      <view class="form-item" @tap="changePhone">
        <text class="label">手机号</text>
        <view class="value">
          <text>{{userInfo.phone || '未绑定'}}</text>
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @tap="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {}
  },
  
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          
          // 更新用户信息中的头像
          this.userInfo.avatarUrl = tempFilePath
          this.saveUserInfo()
          
          uni.showToast({
            title: '更换成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({
            title: '选择失败',
            icon: 'none'
          })
        }
      })
    },

    // 修改昵称
    changeName() {
      uni.showModal({
        title: '修改昵称',
        editable: true,
        placeholderText: '请输入昵称',
        success: (res) => {
          if(res.confirm && res.content) {
            this.userInfo.nickName = res.content
            this.saveUserInfo()
          }
        }
      })
    },

    // 修改手机号
    changePhone() {
      uni.showModal({
        title: '修改手机号',
        editable: true,
        placeholderText: '请输入手机号',
        success: (res) => {
          if(res.confirm && res.content) {
            if(!/^1[3-9]\d{9}$/.test(res.content)) {
              return uni.showToast({
                title: '手机号格式不正确',
                icon: 'none'
              })
            }
            this.userInfo.phone = res.content
            this.saveUserInfo()
          }
        }
      })
    },

    // 保存用户信息
    saveUserInfo() {
      uni.setStorageSync('userInfo', this.userInfo)
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
    },
    
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if(res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            uni.navigateBack()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
}

.header {
  background: #fff;
  padding-top: 88rpx;
  
  .nav-bar {
    position: relative;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      position: absolute;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
      padding: 10rpx;
    }
    
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }
}

.form-list {
  margin-top: 20rpx;
  background: #fff;
  
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .label {
      font-size: 28rpx;
      color: #333;
    }
    
    .value {
      display: flex;
      align-items: center;
      
      text {
        font-size: 28rpx;
        color: #666;
        margin-right: 10rpx;
      }
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
  }
}

.logout-btn {
  margin: 60rpx 40rpx;
  height: 88rpx;
  background: #ff4444;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  text {
    font-size: 32rpx;
    color: #fff;
  }
  
  &:active {
    opacity: 0.9;
  }
}
</style> 